<template>
	<view>
		<view class="div" v-if="show">
			<view>我的用户 </view>
			<view>
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view>当前用户: </view>
			<view>{{username}}</view>
			<button @click="tuochu()">退出当前用户</button>
			<view>我的用户 </view>
		</view>



		<view class="div-deng">
			<view>登录入口</view>
			<view class="shuru">
				<text>请输入用户名:</text>
				<input type="text" focus v-model="id" />
			</view>
			<view class="shuru">
				<text>请输入密码:</text>
				<input type="text" focus v-model="mima" />
			</view>

			<button type="default" @tap="dengru()">登录</button>


		</view>






	</view>
</template>

<script>
	import {
		xinwendenglu
	} from "../../common/api.js"
	export default {
		data() {
			return {
				show: false,
				id: null,
				mima: null,
				logintoken: null,
				username: '未登录'
			}
		},
		methods: {
			dengru() {

                 xinwendenglu(this.id, this.mima).then((res) => {
				
				if (this.id == null || this.mima == null) {
					uni.showToast({
						title: '用户名或密码不能为空',
						icon: 'none',
						duration: 1000
					});
				}
				 else if (res[1].data.result.token == null) {
					uni.showToast({
						title: '用户名或密码错误',
						icon: 'none',
						duration: 1000
					});
				}
				 else {
					uni.showToast({
						title: '登陆成功',
						icon: 'none',
						duration: 1000
						
					});
					if (this.show == false) {
						this.show = true;
					}
					this.loginlist = res[1].data.result.token;
						this.username = res[1].data.result.username;
						
					}

					console.log("登入成功")
					
						
					})
				},
				tuochu() {
						if (this.show == true) {
							this.show = false;
						}
						this.loginlist = '';
						this.username = '未登录';
						console.log("退出成功")
					},

			}
		}
</script>

<style>
	.div {
		width: 800rpx;
		height: 600rpx;
		position: relative;
	}

	.div view:nth-child(1) {
		width: 800rpx;

		position: absolute;
		text-align: center;

		font-size: 35rpx;
		color: #00FF7F;
		background-color: #008000;
	}

	.div view:nth-child(2) image {
		width: 300rpx;
		height: 200rpx;
		position: absolute;
		left: 240rpx;
		top: 80rpx;
	}

	.div view:nth-child(3) {
		width: 300rpx;
		/* height: 200rpx; */
		position: absolute;
		left: 150rpx;
		top: 306rpx;
		font-size: 35rpx;
		color: #c2c2c2;
	}

	.div view:nth-child(4) {
		width: 300rpx;
		/* height: 200rpx; */
		position: absolute;
		left: 350rpx;
		top: 300rpx;
		font-size: 40rpx;
	}

	.div button {

		width: 400rpx;
		position: absolute;
		left: 180rpx;
		top: 400rpx;
		background-color: green;
		color: #00FF7F;
	}

	.div-deng {
		/* display: flex; */
		/* align-items: center; */
		/* justify-content: center; */
		position: relative;

	}

	.div-deng view:nth-child(1) {
		/* display: flex; */
		height: 60rpx;
		background-color: #008000;
		color: #00FF7F;
		font-size: 35rpx;
		text-align: center;
	}


	.shuru input {
		border-bottom: #999999 solid 2rpx;

		height: 60rpx;
		font-size: 30rpx;


	}

	.div-deng button {

		position: absolute;
		width: 800rpx;
		height: 80rpx;
		top: 300rpx;
		color: #00FF7F;
		background-color: #008000;
		font-size: 35rpx;
		text-align: center;
	}
</style>
